<template>
	<view
		class="video-page"
		:style="{
			paddingTop: `${ safeArea.top || 0 }px`,
			paddingBottom: `${ safeArea.bottom || 0 }px`
		}"
	>
		<view
			class="video-top"
			:style="{
				top: `${ $u.sys().statusBarHeight + (safeArea.bottom || 0) }px`
			}"
		>
			<view></view>
			<view class="right-menu">
				<u-icon
					name="more-dot-fill"
					size="24"
					color="#fff"
				></u-icon>
				<u-icon
					name="close"
					size="24"
					color="#fff"
					@click="goBack"
				></u-icon>
			</view>
		</view>
		<video
			:src="videoSrc"
			autoplay
			loop
			id="video"
			:enable-progress-gesture="false"
			style="width: 100%;height: calc(100% - 80rpx);"
		></video>
		<div class="video-bottom">底部内容，没想好放什么</div>
	</view>
</template>

<script>
	export default {
		name: 'videoPage',
		data() {
			return {
				// 视频地址
				videoSrc: "https://i4.chuimg.com/9c512752864611e88a5a02420a000131_720w_1280h.mp4",
				// 安全区域
				safeArea: {},
				// 控制视频播放暂停
				videoContext: null,
			}
		},
		methods: {
			// 返回首页
			goBack() {
				uni.navigateBack()
			},
		},
		props:{
			isShow: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					// 移入当前页面，恢复视频播放
					this.videoContext.play()
				} else {
					// 移出当前页面，暂停视频播放
					this.videoContext.pause()
				}
			}
		},
		created() {
			this.safeArea = uni.$u.sys().safeAreaInsets
		},
		mounted() {
			this.videoContext = uni.createVideoContext('video', this)
		}	
	}
</script>

<style lang="scss" scoped>
	.video-page {
		width: 100%;
		height: 100%;
		background-color: #000;
		position: relative;
		box-sizing: border-box;
		.video-top {
			position: absolute;
			box-sizing: border-box;
			padding-right: 40rpx;
			width: 100%;
			height: 44px;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 1;
			color: #fff;
			.right-menu {
				display: flex;
				::v-deep .u-icon {
					margin-left: 40rpx;
				}
			}
		}
		.video-bottom {
			height: 80rpx;
			color: #fff;
		}
	}
</style>